<script lang='ts' setup name='Person'>  
 import { ref } from 'vue' 
 let props =  withDefaults( defineProps<{
    name:string,
    age:number,
    address:string,
    max?:number    //可选属性
 }>(),

{
    max:999999
}

)
 console.log("props  ",props );
 


</script>  
  
<template>  

      <div class="container">
        <div>
            <span class="title">name:</span>
            <span class="content">{{ name }}</span>
        </div>
        <div>
            <span class="title">age:</span>
            <span class="content">{{ age }}</span>
        </div>
        <div>
            <span class="title">address:</span>
            <span class="content">{{ address }}</span>
        </div>
        <div>
            <span class="title">max:</span>
            <span class="content">{{ max }}</span>
        </div>
      </div>
  
</template>  
  
<style scoped>  
.container{
    background-color: skyblue;
    border-radius: 15px;
    box-shadow: 0 0 10px grey;
    margin: 10px;
    padding: 20px;
}
</style>  